JavaScript Module Federation Runtime API: Динамично управление на модули

            __webpack_require__.federate.init({
  react: {
    [__webpack_require__.federate.DYNAMIC_REMOTE]: {
      get: () => Promise.resolve(React)
    },
    version: '17.0.2',
  },
  'react-dom': {
    [__webpack_require__.federate.DYNAMIC_REMOTE]: {
      get: () => Promise.resolve(ReactDOM)
    },
    version: '17.0.2',
  }
});

            

              
                Copy
              
            
          

            async function loadModule(remoteName, moduleName) {
  try {
    const container = await __webpack_require__.federate.loadRemoteModule(
      `remoteApp@${remoteName}`,  // Make sure remoteName is in the form of {remoteName}@{url}
      'default'
    );
    const Module = container.get(moduleName);
    return Module;
  } catch (error) {
    console.error(`Failed to load module ${moduleName} from remote ${remoteName}:`, error);
    return null;
  }
}

// Usage:
loadModule('remoteApp', './Button')
  .then(Button => {
    if (Button) {
      // Use the Button component
      ReactDOM.render(, document.getElementById('root'));
    }
  });

            

              
                Copy
              
            

Обяснение:

• Този пример дефинира асинхронна функция `loadModule`, която зарежда модул от отдалечено приложение.
• `__webpack_require__.federate.loadRemoteModule` се извиква с URL адреса на входната точка на отдалечения модул и името на обхвата ('default'). Входната точка обикновено е URL, който сочи към файла `remoteEntry.js`, генериран от Webpack.
• Функцията `container.get(moduleName)` извлича модула от отдалечения контейнер.
• След това зареденият модул се използва за рендиране на компонент в хост приложението.

3. `__webpack_require__.federate.shareScopeMap`

Това свойство предоставя достъп до картата на споделения обхват (shared scope map). Картата на споделения обхват е структура от данни, която съхранява информация за споделените зависимости. Тя ви позволява да инспектирате и манипулирате споделения обхват по време на изпълнение.

Пример:

            console.log(__webpack_require__.federate.shareScopeMap);

            

              
                Copy
              
            
          

Обяснение:

• Този пример просто извежда картата на споделения обхват в конзолата. Можете да използвате това, за да инспектирате споделените зависимости и техните версии.

4. `__webpack_require__.federate.DYNAMIC_REMOTE` (Символ)

Този символ се използва като ключ в конфигурацията на споделения обхват, за да се укаже, че дадена зависимост трябва да се зарежда динамично от отдалечен източник.

Пример: (Вижте примера за `init` по-горе)

Практически приложения на Runtime API

Module Federation Runtime API позволява широк спектър от сценарии за динамично управление на модули:

1. Динамично зареждане на функционалности

Представете си голяма платформа за електронна търговия, където различни функционалности (напр. препоръки за продукти, потребителски ревюта, персонализирани оферти) се разработват от отделни екипи. Използвайки Module Federation, всяка функционалност може да бъде внедрена като независим микрофронтенд. Runtime API може да се използва за динамично зареждане на тези функционалности въз основа на потребителски роли, резултати от A/B тестване или географско местоположение.

Пример:

            async function loadFeature(featureName) {
  if (userHasAccess(featureName)) {
    try {
      const Feature = await loadModule(`feature-${featureName}`, './FeatureComponent');
      if (Feature) {
        ReactDOM.render(, document.getElementById('feature-container'));
      }
    } catch (error) {
      console.error(`Failed to load feature ${featureName}:`, error);
    }
  } else {
    // Display a message indicating that the user doesn't have access
    ReactDOM.render(
Access denied
, document.getElementById('feature-container'));
  }
}

// Load a feature based on user access
loadFeature('product-recommendations');

            

              
                Copy
              
            
          

Обяснение:

• Този пример дефинира функция `loadFeature`, която динамично зарежда функционалност въз основа на правата за достъп на потребителя.
• Функцията `userHasAccess` проверява дали потребителят има необходимите разрешения за достъп до функционалността.
• Ако потребителят има достъп, функцията `loadModule` се използва за зареждане на функционалността от съответното отдалечено приложение.
• След това заредената функционалност се рендира в елемента `feature-container`.

2. Архитектура на плъгини

Runtime API е много подходящ за изграждане на архитектури на плъгини. Основното приложение може да предостави рамка за зареждане и изпълнение на плъгини, разработени от трети страни. Това позволява разширяване на функционалността на приложението без промяна на основния код. Помислете за приложения като VS Code или Sketch, където плъгините предоставят специализирани функционалности.

Пример:

            async function loadPlugin(pluginName) {
  try {
    const Plugin = await loadModule(`plugin-${pluginName}`, './PluginComponent');
    if (Plugin) {
      // Register the plugin with the core application
      coreApplication.registerPlugin(pluginName, Plugin);
    }
  } catch (error) {
    console.error(`Failed to load plugin ${pluginName}:`, error);
  }
}

// Load a plugin
loadPlugin('my-awesome-plugin');

            

              
                Copy
              
            
          

Обяснение:

• Този пример дефинира функция `loadPlugin`, която динамично зарежда плъгин.
• Функцията `loadModule` се използва за зареждане на плъгина от съответното отдалечено приложение.
• След това зареденият плъгин се регистрира в основното приложение с помощта на функцията `coreApplication.registerPlugin`.

3. A/B тестване и експериментиране

Module Federation може да се използва за динамично предоставяне на различни версии на дадена функционалност на различни потребителски групи за A/B тестване. Runtime API ви позволява да контролирате коя версия на модула да се зареди въз основа на конфигурациите на експеримента.

Пример:

            async function loadVersionedModule(moduleName, version) {
  let remoteName = `module-${moduleName}-v${version}`;
  try {
    const Module = await loadModule(remoteName, './ModuleComponent');
    return Module; 
  } catch (error) {
    console.error(`Failed to load module ${moduleName} version ${version}:`, error);
    return null;
  }
}

async function renderModule(moduleName) {
  let version = getExperimentVersion(moduleName); // Determine version based on A/B test
  const Module = await loadVersionedModule(moduleName, version);
  if (Module) {
    ReactDOM.render(, document.getElementById('module-container'));
  } else {
    // Fallback or error handling
    ReactDOM.render(
Error loading module
, document.getElementById('module-container'));
  }
}

renderModule('my-module');

            

              
                Copy
              
            
          

Обяснение:

• Този пример показва как да се зареждат различни версии на модул въз основа на A/B тест.
• Функцията `getExperimentVersion` определя коя версия на модула трябва да се зареди въз основа на групата на потребителя в A/B теста.
• След това функцията `loadVersionedModule` зарежда съответната версия на модула.

4. Приложения с множество наематели (Multi-Tenant)

В приложенията с множество наематели, различните наематели може да изискват различни персонализации или функционалности. Module Federation ви позволява динамично да зареждате модули, специфични за наемателя, като използвате Runtime API. Всеки наемател може да има свой собствен набор от отдалечени приложения, експониращи персонализирани модули.

Пример:

            async function loadTenantModule(tenantId, moduleName) {
  try {
    const Module = await loadModule(`tenant-${tenantId}`, `./${moduleName}`);
    return Module;
  } catch (error) {
    console.error(`Failed to load module ${moduleName} for tenant ${tenantId}:`, error);
    return null;
  }
}

async function renderTenantComponent(tenantId, moduleName, props) {
  const Module = await loadTenantModule(tenantId, moduleName);
  if (Module) {
    ReactDOM.render(, document.getElementById('tenant-component-container'));
  } else {
    ReactDOM.render(
Component not found for this tenant.
, document.getElementById('tenant-component-container'));
  }
}

// Usage:
renderTenantComponent('acme-corp', 'Header', { logoUrl: 'acme-logo.png' });

            

              
                Copy
              
            
          

Обяснение:

• Този пример показва как да се зареждат модули, специфични за даден наемател.
• Функцията `loadTenantModule` зарежда модула от отдалечено приложение, специфично за ID-то на наемателя.
• След това функцията `renderTenantComponent` рендира специфичния за наемателя компонент.

Съображения и добри практики

• Управление на версиите: Внимателно управлявайте версиите на споделените зависимости, за да избегнете конфликти и да осигурите съвместимост. Използвайте семантично версиониране и обмислете инструменти като фиксиране на версии (version pinning) или заключване на зависимости (dependency locking).
• Сигурност: Проверявайте целостта на отдалечените модули, за да предотвратите зареждането на злонамерен код във вашето приложение. Обмислете използването на подписване на код или проверка на контролни суми. Също така бъдете изключително внимателни с URL адресите на отдалечените приложения, от които зареждате; уверете се, че се доверявате на източника.
• Обработка на грешки: Внедрете стабилна обработка на грешки, за да се справяте елегантно със случаите, в които отдалечените модули не успеят да се заредят. Предоставяйте информативни съобщения за грешки на потребителя и обмислете резервни механизми.
• Производителност: Оптимизирайте зареждането на отдалечени модули, за да минимизирате латентността и да подобрите потребителското изживяване. Използвайте техники като разделяне на код (code splitting), мързеливо зареждане (lazy loading) и кеширане.
• Инициализация на споделения обхват: Уверете се, че споделеният обхват е инициализиран правилно, преди да заредите каквито и да било отдалечени модули. Това е от решаващо значение за споделянето на зависимости и предотвратяването на дублиране.
• Мониторинг и наблюдаемост: Внедрете мониторинг и регистриране (logging), за да следите производителността и състоянието на вашата Module Federation система. Това ще ви помогне бързо да идентифицирате и разрешавате проблеми.
• Транзитивни зависимости: Внимателно обмислете въздействието на транзитивните зависимости. Разберете кои зависимости се споделят и как те могат да повлияят на общия размер и производителност на приложението.
• Конфликти на зависимости: Бъдете наясно с потенциала за конфликти на зависимости между различни модули. Използвайте инструменти като `peerDependencies` и `externals` за управление на тези конфликти.

Разширени техники

1. Динамични отдалечени контейнери

Вместо да дефинирате предварително отдалечените източници във вашата Webpack конфигурация, можете динамично да извличате техните URL адреси от сървър или конфигурационен файл по време на изпълнение. Това ви позволява да променяте местоположението на вашите отдалечени модули, без да внедрявате отново хост приложението си.

            // Fetch remote configuration from server
async function getRemoteConfig() {
  const response = await fetch('/remote-config.json');
  const config = await response.json();
  return config;
}

// Dynamically register remotes
async function registerRemotes() {
  const remoteConfig = await getRemoteConfig();
  for (const remote of remoteConfig.remotes) {
    __webpack_require__.federate.addRemote(remote.name, remote.url);
  }
}

// Load modules after registering remotes
registerRemotes().then(() => {
  loadModule('dynamic-remote', './MyComponent').then(MyComponent => {
    // ...
  });
});

            

              
                Copy
              
            
          

2. Персонализирани зареждащи модули (Custom Module Loaders)

За по-сложни сценарии можете да създадете персонализирани зареждащи модули, които обработват специфични типове модули или изпълняват персонализирана логика по време на процеса на зареждане. Това ви позволява да приспособите процеса на зареждане на модули към вашите специфични нужди.

3. Рендиране от страна на сървъра (SSR) с Module Federation

Въпреки че е по-сложно, можете да използвате Module Federation с рендиране от страна на сървъра. Това включва зареждане на отдалечени модули на сървъра и рендирането им в HTML. Това може да подобри първоначалното време за зареждане на вашето приложение и да подобри SEO.

Заключение

JavaScript Module Federation Runtime API предоставя мощни инструменти за динамично управление на отдалечени модули. Като разбирате и използвате тези функции, можете да изграждате по-гъвкави, мащабируеми и лесни за поддръжка приложения. Module Federation насърчава независимата разработка и внедряване, което позволява по-бързи цикли на издаване и по-голяма гъвкавост. С узряването на технологията можем да очакваме да се появят още по-иновативни случаи на употреба, които допълнително ще утвърдят Module Federation като ключов фактор за съвременните уеб архитектури.

Не забравяйте внимателно да обмислите аспектите на сигурността, производителността и управлението на версиите на Module Federation, за да осигурите стабилна и надеждна система. Като възприемете тези добри практики, можете да отключите пълния потенциал на динамичното управление на модули и да изградите наистина модулни и мащабируеми приложения за глобална аудитория.